<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="许可证" name="license">
      <el-descriptions title="授权信息" :column="1">
        <el-descriptions-item label="授权类型">{{ LicenseInfo.type }}</el-descriptions-item>
        <el-descriptions-item label="授权给">{{ LicenseInfo.to }}</el-descriptions-item>
        <el-descriptions-item label="发放时间">{{LicenseInfo.issuedAt}}</el-descriptions-item>
        <el-descriptions-item label="有效期至">{{ LicenseInfo.expiredAt }}</el-descriptions-item>
        <el-descriptions-item label="30天日志量(G)">{{ LicenseInfo.monthMaxSize }}</el-descriptions-item>
        <el-descriptions-item label="自定义应用数量">{{ LicenseInfo.appMaxCount }}</el-descriptions-item>
        <el-descriptions-item label="特征码">{{ LicenseInfo.code }}</el-descriptions-item>
      </el-descriptions>
        
      <el-button type="primary" @click="popupLicenseApply = true">申请授权</el-button>
      <el-button type="primary" @click="popupLicenseUpload = true">上传证书</el-button>

      <LicenseApply v-model="popupLicenseApply"></LicenseApply>
      <LicenseUpload v-model="popupLicenseUpload"></LicenseUpload>
    </el-tab-pane>

    <el-tab-pane label="OIDC" name="oidc">

      <el-button type="primary" @click="popupOIDCAdd = true">
      <el-icon><DocumentAdd /></el-icon>
        OIDC
      </el-button>
      <el-table :data="OidcTable" style="width: 100%">
        <el-table-column prop="name" label="系统名" width="180" />
        <el-table-column prop="id" label="客户端ID" width="180" />
        <el-table-column prop="secret" label="客户端密钥" />
        <el-table-column prop="callback" label="回调地址" />
        <el-table-column prop="authUrl" label="认证地址" />
        <el-table-column prop="tokenUrl" label="Token地址" />
        <el-table-column prop="verify" label="校验地址" />
        <el-table-column prop="cert" label="证书" />
        <el-table-column prop="role" label="默认角色" />
        <el-table-column prop="userId" label="用户ID字段" />
        <el-table-column prop="userName" label="用户名字段" />
      </el-table>
    </el-tab-pane>

    <el-tab-pane label="邮件配置" name="email">
      <el-form :model="EmailForm" label-width="10%" ref="EmailRef">
        <el-form-item label="邮件服务器">
          <el-input v-model="EmailForm.server"/>
        </el-form-item>
        <el-form-item label="SSL" prop="name">
          <el-input v-model="EmailForm.ssl" />
        </el-form-item>
        <el-form-item label="发件邮箱" prop="name">
          <el-input v-model="EmailForm.email" />
        </el-form-item>
        <el-form-item label="邮箱密码" prop="name">
          <el-input v-model="EmailForm.password" />
        </el-form-item>
        <el-form-item label="发件邮箱别名" prop="name">
          <el-input v-model="EmailForm.email" />
        </el-form-item>
        <el-button type="primary" @click="">保存</el-button>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="微信配置" name="wechat">
      <el-form :model="WechatForm" label-width="5%" ref="WechatRef">
        <el-form-item label="企业ID">
          <el-input v-model="WechatForm.appid"/>
        </el-form-item>
        <el-form-item label="企业密钥" prop="name">
          <el-input v-model="WechatForm.secret" />
        </el-form-item>
        <el-button type="primary" @click="">保存</el-button>
      </el-form>
    </el-tab-pane>
    
    <el-tab-pane label="钉钉配置" name="dingtalk">
      <el-form :model="DingtalkForm" label-width="5%" ref="WechatRef">
        <el-form-item label="Webhook地址">
          <el-input v-model="DingtalkForm.webhook"/>
        </el-form-item>
        <el-form-item label="密钥" prop="name">
          <el-input v-model="DingtalkForm.secret" />
        </el-form-item>
        <el-button type="primary" @click="">保存</el-button>
      </el-form>
    </el-tab-pane>

  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import LicenseApply from '@/components/Popup/System/LicenseApply.vue'
import LicenseUpload from '@/components/Popup/System/LicenseUpload.vue'

const activeName = ref('license')

const popupOIDCAdd = ref(false)
const popupOIDCUpdate = ref(false)
const popupLicenseApply = ref(false)
const popupLicenseUpload = ref(false)

const LicenseInfo = ref({
  type: '',
  to: '',
  issuedAt: '',
  expiredAt: '',
  monthMaxSize: '',
  appMaxCount: '',
  code: '-'
})
const OidcTable = ref([])
const EmailForm = ref({server: 'smtp.163.com', ssl: null, email: null, password: null})
const WechatForm = ref({appid: '', secret: null})
const DingtalkForm = ref({webhook: '', secret: null})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style>
</style>
